<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background: cadetblue;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        span {

            position: absolute;
            right: 5px;
            bottom: 400px;
        }
    </style>
</head>

<body>
    <!-- <div class="box">
        <span>x</span>
    </div>

    <p>
    <a href="">href为空</a>
    <a href="javascript:;">href为javascript:;</a>
    </p>

    <p>
    <a href="https://www.baidu.com" id="no">跳转百度（阻止跳转事件）</a>
    <a href="https://www.baidu.com">跳转百度</a>
    </p> -->

    <!-- 第一种 在form的内联样式中onsubmit="return false" -->
    <!-- <p>
        <form action="" onsubmit="return false">
         <input type="submit" value="submit">
         <input type="reset" value="reset">
        </form>
    </p> -->

    <!-- <p>
        <form action="">
            <input type="submit" value="submit">
            <input type="reset" value="reset">
        </form>
    </p> -->

    <script>
        // 阻止事件冒泡    
        // var span=document.querySelector("span")
        // var box=document.querySelector(".box")
        // span.onclick=function(e){
        //     box.style.display="none"
        //     // e.stopPropagation();
        //     // 兼容写法
        //     // if(e.stopPropagation){
        //     //     e.stopPropagation();
        //     // }
        //     // else{
        //     //      e.cancelBubble=true
        //     // }
        // }
        // box.onclick=function(){ 
        //     window.open("https://www.baidu.com")

        // }
        // body.onclick=function(){
        //     body.style.background="red"
        // }

        // 阻止a标签默认事件（a默认跳转页面，a默认刷新页面）
        //  var no1=document.getElementById("no");
        // no1.onclick=function(e){
        //     e.preventDefault();
        // 兼容写法
        // if(e.preventDefault){
        //     e.preventDefault();
        // }
        // else{
        //     e.returnValue=false;
        // }
        // }

        //    阻止form默认提交
        // var formo=document.getElementsByTagName("form")[0]
        // var inp=document.querySelector("input[type='submit']")
        // 第二种
        //  formo.onsubmit=function(){
        //      return false
        //  }    

        // 第三种
        //  formo.onsubmit=function(e){
        //     e.preventDefault()  
        //  }

        // 第四种 阻止input点击事件触发form的onsubmit事件  
        //    inp.onclick=function(e){
        //     e.preventDefault()
        //    }

        //  inp.onclick=function(e){
        //   return false;
        //  }

        // 阻止右键菜单(oncontextmenu)的默认事件
        // document.oncontextmenu=function(){
        //     return false
        // }

        // document.oncontextmenu=function(e){
        //     e.preventDefault()
        // }

        // 阻止F5刷新事件
        // document.onkeydown=function(e){
        //     console.log(e.keyCode)
        //     // if(e.keyCode==116){
        //     //     e.preventDefault()
        //     // }
        // }


    </script>
</body>

</html>